<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8" />
        <meta http-equiv="X-UA-Compatible" content="IE=edge" />
        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
        <title>Document</title>
        <script src="https://cdn.jsdelivr.net/npm/vue@2.6.10/dist/vue.js"></script>
    </head>

    <body>
        <div id="app">
            <h1>{{msg}}</h1>
            <input type="text" :value="msg" @input="msg=$event.target.value" />
            <input type="text" v-model="msg" />
            <hr />
            <br />
            <h1>用户{{isAgree?'同意':'不同意'}}该协议</h1>
            <input type="checkbox" v-model="isAgree" />我同意此协议 <br /><br />
            <hr />
            <br />
            <h1>喜欢的水果有{{likeFood}}</h1>
            <input v-model="likeFood" value="香蕉" type="checkbox">香蕉</input>
            <input v-model="likeFood" value="苹果" type="checkbox">苹果</input>
            <input v-model="likeFood" value="火龙果" type="checkbox">火龙果</input>
            <hr />
            <br />
            <h1>喜欢的城市是{{likeCity}}</h1>
            <input type="radio" value="武汉" v-model="likeCity">武汉
            <input type="radio" value="广州" v-model="likeCity">广州
            <input type="radio" value="重庆" v-model="likeCity">重庆
            <input type="radio" value="上海" v-model="likeCity">上海
            <hr />
            <br />
            <h1>请选择你的答案:{{ans}}</h1>
            <select v-model="ans">
              <option value="A">A</option>
              <option value="B">B</option>
              <option value="C">C</option>
              <option value="D">D</option>
            </select>
            <h1>请选择你喜欢的学科:{{project}}</h1>
            <select v-model="project" multiple>
              <option value="A">前端</option>
              <option value="B">java</option>
              <option value="C">测试</option>
              <option value="D">产品</option>
              <option value="D">UI</option>
              <option value="D">运维</option>
            </select>
            <hr />
            <br />
            <h1>请说出你的故事: {{content}}</h1>
            <textarea v-model="content"></textarea>
        </div>
        <script>
            Vue.config.productionTip = false;

            const vm = new Vue({
                el: "#app",
                data() {
                    return {
                        msg: "卡莎",
                        isAgree: false,
                        likeFood: [],
                        likeCity: '',
                        ans: 'A',
                        project: [],
                        content: ''
                    };
                },
            });
        </script>
    </body>
</html>
